﻿@model IEnumerable<Product>
@{
    ViewBag.Title = "List";
}

<h2>Product List</h2>

@foreach (var p in Model)
{
    <div class="prod-box">
        <ul>
            <li>@p.Name</li>
            <li>
                <a href="/Product/Detail/@p.Id">
                    <img class="image" src="/images/products/@p.Image">
                </a>
            </li>
            <li class="price">@p.UnitPrice</li>
            <li class="actions">
                <img src="~/images/icons/Letter.png" />
                <img src="~/images/icons/Heart.png" />
                <a class="add-to-cart" href="/Cart/Add/@p.Id">
                    <img src="~/images/icons/Add%20to%20basket.png" />
                </a>
            </li>
            <li class="icon">
                @if (p.Latest)
                {
                    <img src="~/images/new_icon.gif" />
                }
                else if (p.Special)
                {
                    <img src="~/images/special_icon.gif" />
                }
                else if (p.Discount > 0)
                {
                    <img src="~/images/promo_icon.gif" />
                }
            </li>
        </ul>
    </div>
}

@section scripts{
    <script src="~/jquery-ui/jquery-ui.min.js"></script>
    <link href="~/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <style id="cart-fly"></style>
    <script>
        $(function () {
            $("a.add-to-cart").click(function () {
                var anh = $(this).parents("ul").find(".image");
                var css = ".cart-fly {background: url(" + anh.attr("src") + ");background-size:100% 100%;}";
                $("#cart-fly").html(css);

                var options = { to: "#cart-image", className: "cart-fly" }
                anh.effect("transfer", options, 500);

                href = $(this).attr("href");
                $.ajax({
                    url: href,
                    data: {},
                    success: function (response) {
                        $("#cart-count").html(response.Count + " items");
                        $("#cart-amount").html("$ " + response.Amount);
                    }
                });
                return false;// hủy chức năng của liên kết
            });
        });
    </script>
}